<template>
  <zeda-dialog
    v-model="visible"
    :title="(id <= 0 ? '新建' : '编辑') + ''"
    width="1200px"
    :before-close="handleClose"
  >
    <el-form ref="form" :model="model" size="small" label-width="120px">
      <div class="flex">
        <div>
          <el-form-item label="综合机构名称" prop="organizationName">
            {{ model.organizationName }}
          </el-form-item>
          <el-form-item label="电话号码" prop="organizationPhone">
            {{ model.organizationPhone }}
          </el-form-item>
        </div>
        <div>
          <el-form-item label="表号" prop="tableNo">
            {{ model.tableNo }}
          </el-form-item>
          <el-form-item label="制定机关" prop="enactingOrgan">
            {{ model.enactingOrgan }}
          </el-form-item>
          <el-form-item label="批准机关" prop="approvalOrgan">
            {{ model.approvalOrgan }}
          </el-form-item>
          <el-form-item label="批准文号" prop="approvalNo">
            {{ model.approvalNo }}
          </el-form-item>
          <el-form-item label="有效期至" prop="effectiveDate">
            {{ model.effectiveDate }}
          </el-form-item>
        </div>
      </div>
      <el-descriptions direction="vertical" :column="4" border>
        <el-descriptions-item
          label-class-name="my-label"
          content-class-name="my-content"
          label="公共机构数量(个)"
        >
          {{ model.publicOrganizationNum }}
        </el-descriptions-item>
        <el-descriptions-item
          label-class-name="my-label"
          content-class-name="my-content"
          label="建筑面积(万平方米)"
        >
          {{ model.coveredArea }}
        </el-descriptions-item>
        <el-descriptions-item
          label-class-name="my-label"
          content-class-name="my-content"
          label="用能人数(人）"
        >
          {{ model.energyPeopleNum }}</el-descriptions-item
        >
        <el-descriptions-item
          label-class-name="my-label"
          content-class-name="my-content"
          label="编制人数(人)"
        >
          {{ model.organizationPeopleNum }}
        </el-descriptions-item>
      </el-descriptions>
      <Title :line="false" name="车辆、电" class="mt20">
        <el-descriptions direction="vertical" :column="6" border>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="车辆数量(辆)"
          >
            {{ model.carNum }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="汽油车数量(辆)"
          >
            {{ model.carGasolineNum }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="柴油车数量(辆)"
          >
            {{ model.carDieselNum }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="新能源车数量(辆)"
          >
            {{ model.carNewEnergyNum }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="电消费量(万千瓦时)"
          >
            {{ model.energyElectricity }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="电耗费用(万元)"
          >
            {{ model.feeElectricity }}
          </el-descriptions-item>
        </el-descriptions></Title
      >

      <Title :line="false" name="水、煤炭、天然气" class="mt20">
        <el-descriptions direction="vertical" :column="6" border>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="水消费量(万吨)"
          >
            {{ model.energyWater }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="水耗费用(万元)"
          >
            {{ model.feeWater }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="采煤量(吨)"
          >
            {{ model.energyCoal }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="煤炭费用(万元)"
          >
            {{ model.feeCoal }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="天然气消费量(万立方米)"
          >
            {{ model.energyNaturalGas }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="天然气费用(万元)"
          >
            {{ model.feeNaturalGas }}
          </el-descriptions-item>
        </el-descriptions></Title
      >

      <Title :line="false" name="汽油" class="mt20">
        <el-descriptions direction="vertical" :column="6" border>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="消费总量(万升)"
          >
            {{ model.energyGasoline }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="总费用(万元)"
          >
            {{ model.feeGasoline }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="车辆用油量(万升)"
          >
            {{ model.energyCarGasoline }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="费用(万元)"
          >
            {{ model.feeCarGasoline }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="其它用油量(万升)"
          >
            {{ model.energyCarOtherGasoline }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="其他费用(万元)"
          >
            {{ model.feeOtherGasoline }}
          </el-descriptions-item>
        </el-descriptions>
      </Title>

      <Title :line="false" name="柴油" class="mt20">
        <el-descriptions direction="vertical" :column="6" border>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="消费总量(万升)"
          >
            {{ model.energyDiesel }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="总费用(万元)"
          >
            {{ model.feeDiesel }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="车辆用油量(万升)"
          >
            {{ model.energyCarDiesel }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="费用(万元)"
          >
            {{ model.feeCarDiesel }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="其它用油量(万升)"
          >
            {{ model.energyOtherDiesel }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="其他费用(万元)"
          >
            {{ model.feeOtherDiesel }}
          </el-descriptions-item>
        </el-descriptions>
      </Title>

      <Title :line="false" name="液化石油气、热力、其它能源" class="mt20">
        <el-descriptions direction="vertical" :column="6" border>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="液化石油气消费量(吨)"
          >
            {{ model.energyLpg }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="液化石油气费用(万元)"
          >
            {{ model.feeLpg }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="热力消费量(吉焦)"
          >
            {{ model.energyHeat }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="热力费用(万元)"
          >
            {{ model.feeHeat }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="其它能源消费量(吨标准煤)"
          >
            {{ model.energyOtherPower }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="其它能源费用(万元)"
          >
            {{ model.feeOtherPower }}
          </el-descriptions-item>
        </el-descriptions></Title
      >
      <Title :line="false" name="可再生能源应用" class="mt20">
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="太阳能集热器面积(平方米)"
          >
            {{ model.solarThermalCollectorArea }}
          </el-descriptions-item>

          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="太阳能光电装机容量(千瓦)"
          >
            {{ model.solarPowerPhotoelectricInstallCapacity }}
          </el-descriptions-item>
          <el-descriptions-item
            label-class-name="my-label"
            content-class-name="my-content"
            label="地热利用装机容量(千瓦)"
          >
            {{ model.geothermalUtilizationInstallCapacity }}
          </el-descriptions-item>
        </el-descriptions></Title
      >

      <div class="flex">
        <div>
          <el-form-item label="充电桩数量(个)" prop="chargingPileNum">
            {{ model.chargingPileNum }}
          </el-form-item>
          <el-form-item label="单位负责人" prop="unitLeader">
            {{ model.unitLeader }}
          </el-form-item>
          <el-form-item label="统计员" prop="statisticEmployee">
            {{ model.statisticEmployee }}
          </el-form-item>
        </div>
        <div>
          <el-form-item label="统计负责人" prop="statisticLeader">
            {{ model.statisticLeader }}
          </el-form-item>
          <el-form-item label="填报日期" prop="fillInDate">
            {{ model.fillInDate }}
          </el-form-item>
        </div>
      </div>
    </el-form>
    <form-button
      slot="footer"
      :show-submit-button="false"
      @cancel="handleClose"
    >
    </form-button>
  </zeda-dialog>
</template>

<script>
import { detail } from "@/api/basicdata/yearFlowing";
import FormButton from "@/components/FormButton";

export default {
  dicts: [
    "energy_subarea_type",
    "subentry_type",
    "site_functions",
    "energy_type",
  ],
  components: { FormButton },
  props: {
    id: { type: [Number, String], default: "" },
    visible: { type: Boolean, default: false },
  },
  data() {
    return {
      model: {
        organizationName: "",
        organizationPhone: "",
        tableNo: "",
        enactingOrgan: "",
        approvalOrgan: "",
        approvalNo: "",
        effectiveDate: "",
        publicOrganizationNum: 0,
        coveredArea: "",
        energyPeopleNum: 0,
        organizationPeopleNum: 0,
        carNum: 0,
        carGasolineNum: 0,
        carDieselNum: 0,
        carNewEnergyNum: 0,
        energyElectricity: "",
        feeElectricity: "",
        energyWater: "",
        feeWater: "",
        energyCoal: "",
        feeCoal: "",
        energyNaturalGas: "",
        feeNaturalGas: "",
        chargingPileNum: 0,
        unitLeader: "",
        statisticLeader: "",
        statisticEmployee: "",
        fillInDate: "",
        solarPowerPhotoelectricInstallCapacity: "",
        solarThermalCollectorArea: "",
        geothermalUtilizationInstallCapacity: "",
        energyLpg: "",
        feeLpg: "",
        feeHeat: "",
        energyHeat: "",
        energyOtherPower: "",
        feeOtherPower: "",
        energyCarGasoline: "",
        feeCarGasoline: "",
        feeGasoline: "",
        feeCarGasoline: "",
        feeOtherGasoline: "",
        energyCarOtherGasoline: "",
        energyOtherDiesel: "",
        feeCarDiesel: "",
        feeDiesel: "",
        feeOtherDiesel: "",
        energyCarDiesel: "",
        energyDiesel: "",
      },
      loading: false,
    };
  },
  watch: {
    visible(value) {
      if (value) {
        // this.getPark();
        if (String(this.id).length > 0) {
          this.getInfo();
        }
      }
    },
  },
  methods: {
    getInfo() {
      detail(this.id)
        .then((res) => {
          if (res.code === 700) {
            this.$message.warning(res.msg);
            return false;
          }
          this.model = res?.data;
        })
        .catch(() => {
          // this.$message.error("系统错误,请联系管理员!303005");
        });
    },
    handleClose(status) {
      this.$refs["form"].resetFields();
      this.$emit("update:visible", false);
      this.$emit("close", status === true ? status : false);
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-form {
  .el-input,
  .el-cascader,
  .el-input-number,
  .el-select {
    width: 100% !important;
  }
  .flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  .my-label {
    text-align: center;
  }

  .my-content {
    text-align: center;
  }
}
</style>
